<div class="content-area">
  <router-outlet></router-outlet>
</div>
<clr-vertical-nav
  [clrVerticalNavCollapsible]="true"
  [clr-nav-level]="2"
  class="nav-trigger--bottom"
  cdkDropList
  (cdkDropListDropped)="drop($event)"
>
  <a clrVerticalNavLink routerLink="/fleet/shipyard" routerLinkActive="active">
    <clr-icon shape="slider"></clr-icon>
    船厂
  </a>
  <a
    clrVerticalNavLink
    routerLink="/fleet/autoShip"
    routerLinkActive="active"
    *ngIf="ms.game.automatorManager.autoFleetUp.isUnlocked()"
  >
    <clr-icon shape="ruler-pencil"></clr-icon>
    自动化
  </a>
  <a
    clrVerticalNavLink
    routerLink="/fleet/design/new"
    routerLinkActive="active"
  >
    <clr-icon shape="plus"></clr-icon>
    新增设计
  </a>
  <a
    clrVerticalNavLink
    cdkDrag
    *ngFor="let ds of ms.game.fleetManager.ships; trackBy: designId"
    [routerLink]="'/fleet/design/' + ds.id"
    routerLinkActive="active"
    class="movable"
    style="height:3rem;"
  >
    <clr-icon [attr.shape]="ds.type.shape" class="shipIcon"></clr-icon>
    <span class="inlineFlex clr-row clr-justify-content-between">
      <span class="clr-col-12">
        {{ ds.name }}

        <span class="qtaSpan">
          <app-formatted-quantity [quantity]="ds.quantity" [integer]="true">
          </app-formatted-quantity>
          /
          <app-formatted-quantity [quantity]="ds.wantQuantity" [integer]="true">
          </app-formatted-quantity>
        </span>
      </span>
    </span>
  </a>
</clr-vertical-nav>
